<template>
    <div class="bankadd_content">
      <jm-head ref="head"></jm-head>
        <div class="bankadd_info box">
            <div class="input_div box">
                <van-cell-group>
                  <van-field v-model="form.bank_name"
                    label="银行名称" :border="false"
                    required
                    placeholder="请输入银行名称" />
                </van-cell-group>
                <van-cell-group>
                  <van-field
                    v-model="form.bank_code"
                    required
                    label="银行卡号"
                    placeholder="请输入银行卡号"
                  />
                </van-cell-group>
                <van-cell-group>
                  <van-field v-model="form.accepter_name"
                    required
                    label="姓名" :border="false"
                    placeholder="请输入姓名" />
                </van-cell-group>

                <van-cell-group>
                  <van-field
                    v-model="form.accepter_phone"
                    required
                    label="手机号"
                    placeholder="请输入手机号"
                  />
                </van-cell-group>

                <van-cell-group>
                  <van-field v-model="form.deposit" required label="开户行" :border="false" placeholder="请输入开户行信息" />
                </van-cell-group>

            </div>

            <van-cell-group>
                <van-cell title="设为默认">
                  <template #right-icon>
                    <van-switch :value="form.isDefault" size="26px" active-color="#d64532" @input=setDefault />
                  </template>
                </van-cell>
            </van-cell-group>

            <div class="btns_div box">
                <button class="save_btn" @click="onSave()" style="background-color: #d64532;">保存</button>
                <button class="del_btn" v-if="showDelete" @click="onDelete">删除</button>
            </div>

        </div>



    </div>
</template>
<script>
    import Vue from 'vue';
    import { Toast,Cell, CellGroup,Field,Switch } from 'vant';
    import { editBank, addBank, deleteBank } from "@/api/bank";
    import JmHead from '../head/head'

    Vue.use(Cell).use(CellGroup).use(Field).use(Switch)
export default {
    name: 'bankcarAdd',
    components: {
        JmHead
    },
    data () {
        return {
            showDelete: false,
            form:{
                id: 'new',
                bank_name: '',
                bank_code: '',
                accepter_name: '',
                accepter_phone: '',
                deposit: '',
                isDefault: true
            }
        }
    },
    activated() {
        this.initData()
        this.$refs.head.setNavBarUrl()
    },
    methods: {
        setDefault(e) {
            this.form.isDefault = e
        },
        onSave() {
            let idNew = this.$route.query.id

            this.form.isDefault = this.form.isDefault === true? 1: 0
            if (idNew !== 'new') {
                this.form.id = idNew
                editBank(this.form).then(res => {
                    if (res.code === 20000) {
                        Toast.success({message: '保存成功', duration: 2000})
                        this.$router.go(-1)
                    } else {

                        Toast.fail({message: res.info, duration: 2000})
                    }
                })
            } else {
                addBank(this.form).then(res => {
                    if (res.code === 20000) {
                        Toast.success({message: '保存成功', duration: 2000})
                        this.$router.go(-1)
                    } else {

                        Toast.fail({message: res.info, duration: 2000})
                    }
                })
            }
        },
        onDelete() {
            deleteBank({id: this.form.id}).then(res => {
                if (res.code === 20000) {
                    Toast.success({message: '删除成功', duration: 2000})
                    this.$router.go(-1);
                }
            })
        },
        initData() {
            const id = this.$route.query.id
            if (id !== 'new') {
                this.showDelete =  true,
                this.form.id = this.$route.query.id
                this.form.accepter_name = this.$route.query.accepter_name
                this.form.accepter_phone = this.$route.query.accepter_phone
                this.form.bank_name = this.$route.query.bank_name
                this.form.bank_code = this.$route.query.bank_code
                this.form.deposit = this.$route.query.deposit
                this.form.isDefault = this.$route.query.isDefault === 1 ? true : false
            } else {
                this.showDelete =  false,
                this.form.id = 'new'
                this.form.accepter_name = ''
                this.form.accepter_phone = ''
                this.form.bank_name = ''
                this.form.bank_code = ''
                this.form.deposit = ''
                this.form.isDefault = true
            }
        }

    },
}
</script>

<style lang="stylus" scoped>
    .van-switch--on
        background-color red
    .bankadd_content
        width 100%
        height 100vh
        overflow hidden
        background #f5f5f5
        .bankadd_info
            width 100%
            overflow hidden
            .btns_div
                width 100%
                overflow hidden
                padding 0 .3rem
                button
                    width 100%
                    border 1px solid red
                    background red
                    line-height .9rem
                    height .9rem
                    font-size .30rem
                    color #fff
                    border-radius .9rem
                    display block
                    text-align center
                    margin-top .6rem
                .del_btn
                    color #000
                    border 1px solid #eee
                    background #fff
                    margin-top .3rem

</style>
